<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>绝对定位的参照系</title>
    <style type="text/css">
    body {
        width: 960px;
        margin: 0 auto;
        font-family: 微软雅黑;
        font-size: 18px;
        line-height: 1.8em;
    }

    div {
        width: 400px;
        float: left;
        margin: 0 20px 0 0
    }

    .absolute {
        position: absolute;
        left: 50px;
    }

    .bg {
        background-color: #fcc;
    }

    code {
        background-color: #ccc;
        height: 50px;
        line-height: 50px;
        display: block;
    }
    </style>
</head>

<body>
    <div>
        <h2>以body为参照</h2>
        <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
        <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
        <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
        <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
        <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
        <code>.absolute { position: absolute;	left:50px;}
			</code>
    </div>
    <div>
        <div style="position:relative">
            <h2>以父元素为参照</h2>
            <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
            <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
            <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
            <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了!"</p>
            <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
            <code>.absolute {	position: absolute; left:50px;}
				</code>
        </div>
    </div>
</body>

</html>
